<template>
    <view class="outwrp">
        <view class="bagm">
            <view class="tras">
				<image class="lock" src="/static/img/lock.png" v-show="this.lock"></image>
                <view class="">
                    <text class="texsta">{{detaisobj.destinationCoin}}/</text>
                    <text class="texstb">{{detaisobj.sourceCoin}}</text>
                    <view class="clxh" v-if="detaisobj.strategyType== 0">
                        循环 
                    </view>
                    <view class="clxh" v-if="detaisobj.strategyType== 1">
                        单次
                    </view>
                </view>
            </view>
            <view class="linaks">
                <view class="pulinTwo1">
                    <text class="nomarlText">{{detaisobj.makeOrderNum}}</text>
					<view class="yandon">
                        <!-- 持仓金额({{detaisobj.sourceCoin}}) -->
						持仓金额(U)
                    </view>
                </view>
                <view class="pulinTwo2">
                    <text class="nomarlText">{{detaisobj.positionPrice}}</text>
					<view class="yandon">
                        持仓均价
                    </view>
                </view>
                <!-- <view class="pulin">
                    <text class="nomarlText">{{detaisobj.antiCoverTime}}</text>
					<view class="yandon">
                        加仓次数
                    </view>
                </view>
				<view class="pulin" style="border: 0;">
				    <text class="nomarlText">{{detaisobj.coverTime}}</text>
					<view class="yandon">
				        补仓次数
				    </view>
				</view> -->
            </view>
            <view class="linaks" style="border: 0;padding: 26px 0 0 0;">
                <view class="pulinThree">
                    <text class="nomarlText">{{detaisobj.amount}}</text>
					<view class="yandon">
                        持仓数量({{detaisobj.destinationCoin}})
                    </view>
                </view>
                <view class="pulinThree">
                    <text class="nomarlText">{{detaisobj.price}}</text>
					<view class="yandon">
                        当前价格
                    </view>
                </view>
                <view class="pulinThree" style="border: 0;">
					<view class="rateRise">
						<text class="nomarlText">{{detaisobj.rate}}</text>
						<text>%</text>
					</view>
                    <view class="yandon">
                        涨幅
                    </view>
                </view>
            </view>
        </view>
        <view class="modes">
			<view class="xgcl2">
				<image class="exchangeImgSmall" v-if="detaisobj.exchangeType=='0'" src="../../static/img/ind0.png"></image>
				<image class="exchangeImgSmall" v-if="detaisobj.exchangeType=='1'" src="../../static/img/ind2.png"></image>
				<image class="exchangeImgSmall" v-if="detaisobj.exchangeType=='2'" src="../../static/img/ind1.png"></image>
			</view>
            <view class="xgcl">
				策略相关
				<view class="">
				    <view class="buy" v-if="detaisobj.direction=='buy'">
				        {{detaisobj.leverRate}}X·多
				    </view>
				    <view class="sell" v-if="detaisobj.direction=='sell'">
				        {{detaisobj.leverRate}}X·空
				    </view>
				</view>
            </view>
            <view class="linaks">
                <view class="pulin">
                    <view class="yanl">
                        {{detaisobj.initOrderPosition}}
                    </view>
                    <view class="yandon">
						<view v-if="detaisobj.exchangeType== 0">
						    首单额度(U)
						</view>
						<view v-if="detaisobj.exchangeType== 1">
						    首单额度(U)
						</view>
						<view v-if="detaisobj.exchangeType== 2">
						    首单额度(U)
						</view>
                    </view>
                </view>
                <!-- <view class="pulin">
                    <view class="yanl">
                        {{detaisobj.doubleLimit}}
                    </view>
                    <view class="yandon">
                        补仓上限(次)
                    </view>
                </view>
                <view class="pulin" style="border: 0;">
                    <view class="yanl">
                        {{detaisobj.stopProfitRatio}}%
                    </view>
                    <view class="yandon">
                        补仓止盈率
                    </view>
                </view> -->
            </view>
            <!-- <view class="linaks">
                <view class="pulin">
                    <view class="yanl">
                        {{detaisobj.stopProfitBackRatio}}%
                    </view>
                    <view class="yandon">
                        补仓止盈回调率
                    </view>
                </view>
                <view class="pulin">
                    <view class="yanl">
                        {{detaisobj.coverRate}}%
                    </view>
                    <view class="yandon">
                        补仓跌幅率
                    </view>
                </view>
                <view class="pulin" style="border: 0;">
                    <view class="yanl">
                        {{detaisobj.addPositionBackRatio}}%
                    </view>
                    <view class="yandon">
                        补仓回调率
                    </view>
                </view>
            </view> -->
			<!-- <view class="linaks">
			    <view class="pulin">
			        <view class="yanl">
			            {{detaisobj.antiDoubleLimit}}
			        </view>
			        <view class="yandon">
			            加仓上限(次)
			        </view>
			    </view>
			    <view class="pulin">
			        <view class="yanl">
			            {{detaisobj.antiCoverRate}}%
			        </view>
			        <view class="yandon">
			            加仓涨幅率
			        </view>
			    </view>
			    <view class="pulin" style="border: 0;">
			        <view class="yanl">
			            {{detaisobj.antiStopProfitRatio}}%
			        </view>
			        <view class="yandon">
			            加仓止盈率
			        </view>
			    </view>
			</view> -->
			<!-- <view class="linaks">
			    <view class="pulin">
			        <view class="yanl">
			            {{detaisobj.stopLossesRatio}}%
			        </view>
			        <view class="yandon">
			            对冲前止损率
			        </view>
			    </view>
			    <view class="pulin">
			        <view class="yanl">
			            {{detaisobj.stopLossProfit}} %
			        </view>
			        <view class="yandon">
			            对冲后止损率
			        </view>
			    </view>
			    <view class="pulin">
			        <view class="yanl">
			            {{detaisobj.totalStopLossNumLimitAddNum}}
			        </view>
			        <view class="yandon">
			            对冲补仓次数
			        </view>
			    </view>
			</view> -->
			
			<!-- <view class="linaks">
			    <view class="pulin">
					<view class="yanl">
						<view v-if="detaisobj.getOffNeedTime=='0'">
						    正常模式
						</view>
						<view v-if="detaisobj.getOffNeedTime=='1'">
						    快进快出
						</view>
					</view>
			        <view class="yandon">
			            运行模式
			        </view>
			    </view>
			    <view class="pulin">
			        <view class="yanl">
			            {{detaisobj.getOffProfitLine}} U
			        </view>
			        <view class="yandon">
			            解套浮动盈亏
			        </view>
			    </view>
				<view class="pulin">
				    <view class="yanl">
				        {{detaisobj.getOffAddPositionNum}}
				    </view>
				    <view class="yandon">
				        解套补仓次数
				    </view>
				</view>
			</view> -->
			
			<!-- <view class="linaks" style="border-bottom: 1px solid #EBEBEB;">
			    <view class="pulin">
			        <view class="yanl">
			            {{detaisobj.buyStopRate}}%
			        </view>
			        <view class="yandon">
			            多单对冲跌幅
			        </view>
			    </view>
			    <view class="pulin">
			        <view class="yanl">
			            {{detaisobj.sellStopRate}}%
			        </view>
			        <view class="yandon">
			            空单对冲涨幅
			        </view>
			    </view>
				<view class="pulin" style="border: 0;">
				    <view class="yanl">
						<view v-if="detaisobj.addPositionTimesModelSwitch=='0'">
						    固定
						</view>
						<view v-if="detaisobj.addPositionTimesModelSwitch=='1'">
						    动态
						</view>
				    </view>
				    <view class="yandon">
				        倍数模式
				    </view>
				</view>
			</view> -->
			
			<!-- <view class="bcjpri">
			    <view class="lefp">
			        当前对冲仓数量(币)
			    </view>
				<view class="pricets">
				    {{detaisobj.offSetAmount}}
				</view>
			</view> -->
            <!-- <view class="bcjpri">
                <view class="lefp">
                    正向补仓价格
                </view>
				<view class="pricets" v-if="detaisobj.direction=='buy'">
				    <= {{detaisobj.coverPirce}}
				</view>
				<view class="pricets" v-if="detaisobj.direction=='sell'">
				    >= {{detaisobj.coverPirce}}
				</view>
            </view>
			<view class="bcjpri">
			    <view class="lefp">
			        正向止盈价格
			    </view>
				<view class="pricets" v-if="detaisobj.direction=='buy'">
				    >= {{detaisobj.stopProfitPrice}}
				</view>
				<view class="pricets" v-if="detaisobj.direction=='sell'">
				    <= {{detaisobj.stopProfitPrice}}
				</view>
			</view> -->
            </view>
            <view class="modthres">
                <view class="xgcl">
                    策略操作
                </view>
                <view class="clnm">
                    <view v-if="strategyTypes=='1'">
                        <image src="../../static/img/ter4.png"></image>
                        <view class="mcl">
                            单次策略
                        </view>
                    </view>
                    <view v-if="strategyTypes=='0'">
                        <image src="../../static/img/ter1.png"></image>
                        <view class="mcl">
                            循环策略
                        </view>
                    </view>
                    <!-- <view @click="qcsell">
                        <image src="../../static/img/ter3.png"></image>
                        <view class="mcl">
                            清仓卖出
                        </view>
                    </view> -->
                </view>
            </view>
            <view class="teobns">
                <button type="default" class="set" @click="nativ">
                    交易设置
                </button>
				<!-- <button type="default" class="stop" v-show="isActive=='0'" @click="stopfns">
				    停止
				</button> -->
				<button type="default" class="stop" v-show="isActive=='0'" @click="stopfnsAndSell">
				    停止并清仓
				</button>
				<button type="default" class="start" v-show="isActive=='1'" @click="starstsfns">
				    启动
				</button>
            </view>
			<!-- <view class="lockButton">
			    <button class="lock" @click="toLock">
			        加锁
			    </button>
				<button class="unlock" @click="toUnLock">
				    解锁
				</button>
			</view> -->
        </view>
</template>

<script>
    let uinfo;
    import request from "../../untils/request.js";
    import {multiply} from "../../untils/math.js";
    const math = require('mathjs')
    export default {
		components: {
		},
        data() {
            return {
                isActive: '1',
                detaisobj: {
					amount: 0,
					positionPrice: 0,
					makeOrderNum: 0,
					price: 0,
					coverTime: 0,
					rate: 0,
					initOrderPosition: 0,
					stopProfitRatio: 0,
					coverRate: 0,
					coverPirce: 0,
					doubleLimit: 0,
					stopProfitBackRatio: 0,
					stopLossesRatio: 0,
					addPositionBackRatio: 0
				},
                strategyTypes: '',
                dssts:'',
                sours:"",
                imges:'',
				lock: false
            }
        },
        onLoad(options) {
			console.log("options",options)
            this.imges=options.urls;
            uinfo = uni.getStorageSync('userInfo');
			this.exchangeType=options.exchangeType;
            this.dssts=options.dest;
            this.sours=options.sourc;
			this.direction = options.direction;
			this.leverRate = options.leverRate;
            this.binDetailFn(options.exchangeType,options.dest, options.sourc,options.direction,options.leverRate);
        },
        onShow() {
            this.binDetailFn(this.exchangeType,this.dssts,this.sours,this.direction,this.leverRate);
        },
        onPullDownRefresh() {
            this.binDetailFn(this.exchangeType,this.dssts,this.sours,this.direction,this.leverRate);
        },
        //交易记录点击
        onNavigationBarButtonTap: function(e) {
			let direction;
			if(e.text == "交易记录"){
				direction = this.detaisobj.direction;
				console.log("交易记录:",direction);
				uni.navigateTo({
				    url: `../transrecord/transrecord?dest=${this.detaisobj.destinationCoin}&sourc=${this.detaisobj.sourceCoin}&exch=${this.detaisobj.exchangeType}&imgurl=${this.imges}&direction=${direction}&leverRate=${this.detaisobj.leverRate}`
				});
			}else if(e.text == "对冲记录"){
				direction = this.detaisobj.direction == "buy"?"sell":"buy";
				console.log("对冲记录:",direction);
				uni.navigateTo({
				    url: `../transrecord/offsetrecord?dest=${this.detaisobj.destinationCoin}&sourc=${this.detaisobj.sourceCoin}&exch=${this.detaisobj.exchangeType}&imgurl=${this.imges}&direction=${direction}&leverRate=${this.detaisobj.leverRate}`
				});
			}
        },
        methods: {
            nativ() {
                uni.navigateTo({
                    url: `/pages/transset/transset?dest=${this.detaisobj.destinationCoin}&sourc=${this.detaisobj.sourceCoin}&exchangety=${this.detaisobj.exchangeType}&direction=${this.detaisobj.direction}&leverRate=${this.detaisobj.leverRate}`,
                });
            },
            //详情
            binDetailFn(exchangeType,dest, sourc,direction,leverRate) {
				request.postAssets('/assets/quantOperate/getOpeningQuantBotDetail', {
						userId: uinfo.userId, //用户账户ID
						exchangeType: exchangeType, //交易所类型(0.okex 1.huobi 2.binance)
					    destinationCoin: dest, //交易对目的币种
					    sourceCoin: sourc, //交易对目的币种
					  	direction: direction //多空方向(buy:多单 sell:空单)
					}).then(res => {
                    if (res.code == '200') {
                        uni.stopPullDownRefresh();
                        this.detaisobj = res.data;
                        this.lock = this.detaisobj.lock;
                        //显示开启或者停止按钮
						this.isActive = res.data.status;
                        
                        function substr(str,num){
                            var s = str + "";
                            if(s.indexOf(".")!='-1'){
                                var str = s.substring(0,s.indexOf(".") + num);
                            }
                            return str
                        }

                        this.detaisobj.rate = substr(this.detaisobj.rate,5)
                        this.detaisobj.stopProfitRatio=substr(this.detaisobj.stopProfitRatio,5);
                        this.detaisobj.stopProfitBackRatio=substr(this.detaisobj.stopProfitBackRatio,5);
                        this.detaisobj.coverRate=substr(this.detaisobj.coverRate,5)
                        this.detaisobj.addPositionBackRatio=substr(this.detaisobj.addPositionBackRatio,5)
						this.detaisobj.stopLossesRatio = substr(this.detaisobj.stopLossesRatio,5)
						this.detaisobj.stopLossProfit = substr(this.detaisobj.stopLossProfit,5)
						this.detaisobj.stopProfitPrice = substr(this.detaisobj.stopProfitPrice,7)
                        this.detaisobj.coverPirce = substr(this.detaisobj.coverPirce,7)
                        this.detaisobj.price = substr(this.detaisobj.price,7)
						this.detaisobj.makeOrderNum = substr(this.detaisobj.makeOrderNum,7)
						
                        //策略，单次---循环
                        if (res.data.strategyType == 0) {
                            //循环
                            this.strategyTypes = '0';
                        } else {
                            //单次
                            this.strategyTypes = '1';
                        }
                    }else{
                        uni.stopPullDownRefresh();
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                    }
                })
            },
            //清仓
            qcsell() {
                let _this = this;
                uni.showModal({
                    title: '清仓卖出',
                    content: '按照当前价格，卖出所有资产确定清仓吗？',
                    confirmText: "确认",
                    confirmColor: "#7F6AC3",
                    success: function(res) {
                        if (res.confirm) {
                            console.log('清仓')
                            uni.showLoading({
                                mask:true
                            });

                            request.postAssets('/assets/quantOperate/operateBot', {
								userId: uinfo.userId,
								operateType: 1, //操作类型 0开仓 1清仓 2停止机器人 3锁仓 4解锁
								sourceCoin: _this.detaisobj.sourceCoin, //交易对源币种
								destinationCoin: _this.detaisobj.destinationCoin, //交易对目的币种
								exchangeType: _this.detaisobj.exchangeType, //交易所类型(0.okex 1.huobi 2.binance)
								direction: _this.detaisobj.direction  //仓位方向类型 buy:多仓 sell:空仓
                            }).then(res => {
                                if (res.code == '200') {
                                    uni.hideLoading();
                                    uni.showToast({
                                        icon: "none",
                                        title: '清仓卖出',
                                    });
                                } else {
                                    uni.hideLoading();
                                    uni.showToast({
                                        icon: "none",
                                        title: res.message,
                                    });
                                }
                            })
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
            //停止
            stopfns() {
                let _this = this;
                uni.showModal({
                    title: '停止',
                    content: '你确认要停止吗？',
                    confirmText: "确认",
                    confirmColor: "#7F6AC3",
                    success: function(res) {
                        if (res.confirm) {
                            uni.showLoading({
                                mask:true
                            });

                            request.postAssets('/assets/quantOperate/operateBot', {
								userId: uinfo.userId, //用户ID
								operateType: 2, //操作类型 0开仓 1清仓 2停止机器人 3锁仓 4解锁
								sourceCoin: _this.detaisobj.sourceCoin, //交易对源币种
								destinationCoin: _this.detaisobj.destinationCoin, //交易对目的币种
								exchangeType: _this.detaisobj.exchangeType, //交易所类型(0.okex 1.huobi 2.binance)
								direction: _this.detaisobj.direction  //仓位方向类型 buy:多仓 sell:空仓
                            }).then(res => {
                                if (res.code == '200') {
                                    _this.isActive = '1';
                                    uni.hideLoading();
                                    uni.showToast({
                                        icon: "none",
                                        title: '停止成功',
                                    });
                                } else {
                                    uni.hideLoading();
                                    uni.showToast({
                                        icon: "none",
                                        title: res.message,
                                    });
                                }
                            })
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
			//停止并清仓
			stopfnsAndSell() {
			    let _this = this;
			    uni.showModal({
			        title: '停止并清仓',
			        content: '你确认要停止机器人并且清仓吗？',
			        confirmText: "确认",
			        confirmColor: "#7F6AC3",
			        success: function(res) {
			            if (res.confirm) {
			                uni.showLoading({
			                    mask:true
			                });
			
			                request.postAssets('/assets/quantOperate/operateBot', {
								userId: uinfo.userId, //用户ID
								operateType: 2, //操作类型 0开仓 1清仓 2停止机器人 3锁仓 4解锁
								sourceCoin: _this.detaisobj.sourceCoin, //交易对源币种
								destinationCoin: _this.detaisobj.destinationCoin, //交易对目的币种
								exchangeType: _this.detaisobj.exchangeType, //交易所类型(0.okex 1.huobi 2.binance)
								direction: _this.detaisobj.direction  //仓位方向类型 buy:多仓 sell:空仓
			                }).then(async res => {
			                    if (res.code == '200') {
			                        _this.isActive = '1';
									await new Promise(resolve => setTimeout(resolve, 1100));
			                        request.postAssets('/assets/quantOperate/operateBot', {
			                        	userId: uinfo.userId,
			                        	operateType: 1, //操作类型 0开仓 1清仓 2停止机器人 3锁仓 4解锁
			                        	sourceCoin: _this.detaisobj.sourceCoin, //交易对源币种
			                        	destinationCoin: _this.detaisobj.destinationCoin, //交易对目的币种
			                        	exchangeType: _this.detaisobj.exchangeType, //交易所类型(0.okex 1.huobi 2.binance)
			                        	direction: _this.detaisobj.direction  //仓位方向类型 buy:多仓 sell:空仓
			                        }).then(res => {
			                            if (res.code == '200') {
			                                uni.hideLoading();
			                                uni.showToast({
			                                    icon: "none",
			                                    title: '停止并清仓成功',
			                                });
			                            } else {
			                                uni.hideLoading();
			                                uni.showToast({
			                                    icon: "none",
			                                    title: res.message,
			                                });
			                            }
			                        })
			                    } else {
			                        uni.hideLoading();
			                        uni.showToast({
			                            icon: "none",
			                            title: res.message,
			                        });
			                    }
			                })
			            } else if (res.cancel) {
			                console.log('用户点击取消');
			            }
			        }
			    });
			},
            //启动
            starstsfns() {
                let _this = this;
                let typenum='0';
                if( _this.detaisobj.makeOrderNum!=0){
                    typenum='2';
                }else{
                    typenum='0'
                }
                uni.showModal({
                    title: '启动',
                    content: '你确认要启动吗？',
                    confirmText: "确认",
                    cancelText:'取消',
                    confirmColor: "#7F6AC3",
                    success: function(res) {
                        if (res.confirm) {
                            console.log('用户点击确定');
                            uni.showLoading({
                                mask:true
                            });
                            
                            request.postAssets('/assets/quantOperate/operateBot', {
								userId: uinfo.userId, //用户ID
								operateType: 0, //操作类型 0开仓 1清仓 2停止机器人 3锁仓 4解锁
								sourceCoin: _this.detaisobj.sourceCoin, //交易对源币种
								destinationCoin: _this.detaisobj.destinationCoin, //交易对目的币种
								exchangeType: _this.detaisobj.exchangeType, //交易所类型(0.okex 1.huobi 2.binance)
                                amount: _this.detaisobj.initOrderPosition, //数量(U)
								direction: _this.detaisobj.direction  //仓位方向类型 buy:多仓 sell:空仓
                            }).then(res => {
                                if (res.code == '200') {
                                    _this.isActive = '0';
                                    uni.hideLoading();
                                    _this.binDetailFn(_this.exchangeType,_this.dssts,_this.sours,_this.direction,_this.leverRate);
                                    uni.showToast({
                                        icon: "none",
                                        title: '启动成功',
                                    });
                                } else {
                                    uni.hideLoading();
                                    uni.showToast({
                                        icon: "none",
                                        title: res.message,
                                    });
                                }
                            })
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
			//去加锁
			toLock() {
				let _this = this;
				uni.showModal({
				    title: '加锁',
				    content: '你确认要加锁吗？',
				    confirmText: "确认",
				    cancelText:'取消',
				    confirmColor: "#7F6AC3",
				    success: function(res) {
				        if (res.confirm) {
				            uni.showLoading({
				                mask:true
				            });
				            
				            request.postAssets('/assets/quantOperate/operateBot', {
								userId: uinfo.userId, //用户ID
								operateType: 3, //操作类型 0开仓 1清仓 2停止机器人 3锁仓 4解锁
								sourceCoin: _this.detaisobj.sourceCoin, //交易对源币种
								destinationCoin: _this.detaisobj.destinationCoin, //交易对目的币种
								exchangeType: _this.detaisobj.exchangeType, //交易所类型(0.okex 1.huobi 2.binance)
								direction: _this.detaisobj.direction  //仓位方向类型 buy:多仓 sell:空仓
				            }).then(res => {
				                if (res.code == '200') {
				                    this.lock = true;
				                    uni.hideLoading();
				                    uni.showToast({
				                        icon: "none",
				                        title: '加锁成功',
				                    });
				                } else {
				                    uni.hideLoading();
				                    uni.showToast({
				                        icon: "none",
				                        title: res.message,
				                    });
				                }
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			//去解锁
			toUnLock(){
				let _this = this;
				uni.showModal({
				    title: '解锁',
				    content: '你确认要解锁吗？',
				    confirmText: "确认",
				    cancelText:'取消',
				    confirmColor: "#7F6AC3",
				    success: function(res) {
				        if (res.confirm) {
				            uni.showLoading({
				                mask:true
				            });
				            
				            request.postAssets('/assets/quantOperate/operateBot', {
								userId: uinfo.userId, //用户ID
								operateType: 4, //操作类型 0开仓 1清仓 2停止机器人 3锁仓 4解锁
								sourceCoin: _this.detaisobj.sourceCoin, //交易对源币种
								destinationCoin: _this.detaisobj.destinationCoin, //交易对目的币种
								exchangeType: _this.detaisobj.exchangeType, //交易所类型(0.okex 1.huobi 2.binance)
								direction: _this.detaisobj.direction  //仓位方向类型 buy:多仓 sell:空仓
				            }).then(res => {
				                if (res.code == '200') {
				                    this.lock = false;
				                    uni.hideLoading();
				                    uni.showToast({
				                        icon: "none",
				                        title: '解锁成功',
				                    });
				                } else {
				                    uni.hideLoading();
				                    uni.showToast({
				                        icon: "none",
				                        title: res.message,
				                    });
				                }
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
        }
    }
</script>

<style>
    .active {
        display: none;
    }

    .outwrp {
        background: #F5F5F5;
    }

    .bagm {
        width: 100%;
        height: 336.5px;
        background: url('../../static/img/del.png') no-repeat;
        background-size: cover;
    }

    .tras {
        display: flex;
        justify-content: center;
        padding: 30px 0 26px;
    }

    .tras image {
        width: 46px;
        height: 46px;
    }

    .tras .texsta {
        font-size: 22px;
        font-family: Aileron;
        font-weight: bold;
        line-height: 30px;
        color: #FFFFFF;
    }

    .tras .texstb {
        font-size: 16px;
        font-family: Aileron;
        font-weight: 400;
        line-height: 22px;
        color: #FFFFFF;
    }

    .tras .clxh {
        width: 59px;
        height: 18px;
        background: linear-gradient(180deg, #F1005A 0%, #E12103 100%);
        border-radius: 13px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 18px;
        color: #FFFFFF;
        text-align: center;
    }

    .linaks {
        display: flex;
        justify-content: space-between;
        margin: 0 18px;
        padding: 0 0 26px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .3);
    }

    .linaks .pulin {
		display: flex;
		flex-direction: column;
        align-items: center;
        justify-content: center;
		width: 120px;
        border-right: 1px solid rgba(255, 255, 255, .3);
    }
	
	.linaks .pulinTwo1 {
		display: flex;
		flex-direction: column;
	    align-items: center;
	    justify-content: center;
		width: 50%;
		border-right: 1px solid rgba(255, 255, 255, .3);
	}
	
	.linaks .pulinTwo2 {
		display: flex;
		flex-direction: column;
	    align-items: center;
	    justify-content: center;
		width: 50%;
	}
	
	.linaks .pulinThree {
		display: flex;
		flex-direction: column;
	    align-items: center;
	    justify-content: center;
		width: 33%;
	    border-right: 1px solid rgba(255, 255, 255, .3);
	}

    .linaks .yanl {
        font-size: 14px;
        font-family: Aileron;
        font-weight: bold;
        line-height: 20px;
        color: #FFFFFF;
    }

    .linaks .yandon {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 24px;
        color: #FFFFFF;
        opacity: 0.7;
    }

    .modes {
        width: 710rpx;
        height: 170px;
        background: #FFFFFF;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        border-radius: 10px;
        margin: -55px auto 0;
    }

    .modes .linaks {
        display: flex;
        justify-content: space-between;
        margin: 0 60rpx;
        padding: 0 0 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .3);
    }

    .modes .linaks .pulin {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-right: 1px solid rgba(255, 255, 255, .3);
    }

    .modes .linaks .pulin:nth-of-type(1) {
        text-align: left;
    }

    .modes .linaks .pulin:nth-of-type(3) {
        text-align: right;
    }

    .modes .linaks .yanl {
        font-size: 22px;
        font-family: Aileron;
        font-weight: 600;
        line-height: 30px;
        color: #333333;
    }

    .modes .linaks .yandon {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 24px;
        color: #838AA4;
    }

    .modes .xgcl {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 27px;
        color: #333333;
        margin: 0 auto 0px;
        width: 70px;
        text-align: center;
    }

    .modes .xgcl2 {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        text-align: center;
    }

    .bcjpri {
        display: flex;
        justify-content: space-between;
        margin: 20px 60rpx 0;
    }

    .bcjpri .lefp {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 24px;
        color: #838AA4;
    }

    .bcjpri .pricets {
        font-size: 16px;
        font-family: Aileron;
        font-weight: 400;
        line-height: 22px;
        color: #333333;
    }

    .modthres {
        width: 710rpx;
        height: 170px;
        background: #FFFFFF;
        margin: 15px auto 0;
        border-radius: 10px;
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    }

    .modthres .xgcl {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 27px;
        color: #333333;
        margin: 0 auto 20px;
        padding: 20px 0 0;
        width: 70px;
        text-align: center;
    }

    .clnm {
        display: flex;
        justify-content: space-around;
        margin: 0 30px;
    }

    .clnm image {
        width: 60px;
        height: 60px;
    }

    .clnm .mcl {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 24px;
        color: #333333;
    }

    .teobns {
        display: flex;
        margin: 30px 0 0;
        padding: 0 0 30px 0;
    }

    .teobns .start {
        width: 120px;
        height: 38px;
        background: #007300;
        border-radius: 19px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
    }
	
	.teobns .stop {
	    width: 120px;
	    height: 38px;
	    background: #a39177;
	    border-radius: 19px;
	    font-size: 14px;
	    font-family: Source Han Sans CN;
	    font-weight: 400;
	    color: #FFFFFF;
	}
	
	.teobns .set {
	    width: 120px;
	    height: 38px;
	    background: #81859a;
	    border-radius: 19px;
	    font-size: 14px;
	    font-family: Source Han Sans CN;
	    font-weight: 400;
	    color: #FFFFFF;
	}
	
	.lockButton {
	    display: flex;
	    padding: 0 0 30px 0;
	}
	
	.lockButton .lock {
	    width: 120px;
	    height: 38px;
	    background: #000000;
	    border-radius: 19px;
	    font-size: 14px;
	    font-family: Source Han Sans CN;
	    font-weight: 400;
	    color: #FFFFFF;
	}
	
	.lockButton .unlock {
	    width: 120px;
	    height: 38px;
	    background: #ffaa00;
	    border-radius: 19px;
	    font-size: 14px;
	    font-family: Source Han Sans CN;
	    font-weight: 400;
	    color: #FFFFFF;
	}
	
	.buy {
	    font-size: 19px;
	    font-weight: 400;
	    color: #008800;
	}
	
	.sell {
	    font-size: 19px;
	    font-weight: 400;
	    color: #D63E5D;
	}
	
	.exchangeImgSmall {
		width: 50px;
		height: 50px;
	}

    .rateRise{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	
	.rateRise text{
		font-size: 14px;
		font-family: Aileron;
		font-weight: bold;
        color: #FFFFFF;
	}
	.nomarlText{
		font-family: Aileron;
		font-weight: bold;
		font-size: 14px;
		color: #ffffff;
	}
</style>
